<template>
	<div class="page">
		<div class="header flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>{{tag}}</h2>
			<div class="back">&nbsp;</div>
		</div>
		<div class="abox yellow">
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<ul class="product">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<li class="flex col" v-for="(v,i) in productList" :key="v.productId" @click="enter('/goodsdetail?productId='+v.productId)">
							<div class="productImage"><img :src="v.frontPicUrl"></div>
							<div class="productInfo flex col jlr">
								<div class="title">
									<b>{{tag}}</b>{{v.productName}}
								</div>
								<div class="flex a-center jlr ce">
									<h4>￥<span>{{v.price}}</span></h4>
									<i class="iconfont icon-chat-gray"></i>
								</div>
							</div>
						</li>
					</van-list>
				</ul>
			</van-pull-refresh>
		</div>
	</div>
</template>
<script>
import saveScroll from '../../mixins/scroll'	
export default {
	mixins:[saveScroll],
	data(){
		return {
			timer:null,
			isLoading: false,
			loading: false,
			finished: false,
			pageNum:0,
			pageSize:10,
			productList:[],
      tag: null,
		}
	},
	activated() {
		var that = this
		if(this.$route.query.tag){
		  this.tag = this.$route.query.tag;
		}else{
		  this.tag = '产品列表';
		}
		that.timer = setTimeout(()=>{//不是第一次进来这个定时器会被关闭
			if(!this.$store.state.backstate){//不是返回
				 console.log('执行了，返回顶部')				 
				 that.productList = [];
				 that.pageNum = 0;
				 that.onLoad();
				 that.isLoading = false;
			}else{
				 console.log('不返回顶部')
				 that.$store.commit('setBackstate',false)
			}
		})       
	},
	methods:{
		enter(v){
			this.$router.push(v)
		},
		back(){
			this.$router.go(-1)
		},
		onRefresh(){
      let that = this;
      setTimeout(() => {
        that.pageNum = 0;
        that.productList = [];
        that.getList();
        that.isLoading = false;
        that.finished = false;
      }, 500);
		},
    onLoad(){      
      const that = this;
			clearTimeout(that.timer)
      that.getList();
      that.isLoading = false;
    },
    getList(){
      let that = this;
      console.log('list size :',that.productList.length);
      that.pageNum = that.pageNum + 1;

      const reqData = {
        classId: this.$route.query.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };

      this.$ajax.getProductInfoList(reqData).then(res=>{
        if(res != null){
          const code = res.code;
          const msg = res.msg;
          if(code == 0){
            const data = res.data;
            if(data){
              const proList = data.productList;
              if(proList != null && proList.length != 0){
                proList.forEach(function(item, index, array) {
                  that.productList.push(item);
                });
                if(proList.length < that.pageSize){
                  that.finished = true;
                }
              }else{
                that.finished = true;
              }
            }
          }
        }
      });

      that.isLoading = false;
      that.loading = false;
    },
		destroyed() {      
		  this.$store.commit('setBackstate',false)
		}
	}
}
</script>
